<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hellovue</title>
</head>
<body>
    
    <div id="app">
        <!--模板语法  -->
        {{ message }}
      <!-- v开头称为指令 
        v-once :绑定一次
        v-html:绑定的支持html语法
        v-bind:绑定属性 ，可以简写  <a v-bind:href="url">...</a>  =><a :href="url">...</a>
        v-if: v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p> 元素
        v-on 指令，它用于监听 DOM 事件：<a v-on:click="函数()">...</a>
              <a @click="doSomething">...</a>
        v-for:指令，用来遍历
    -->
   
   <input type="text" />
   <button  @click="getPatient()">查询</button>
   <div v-for = "(p ,index) in patients">
      <p>{{ index+1 }} - {{ p.name }} -- {{ p.phone }} --  {{p.status}}</p>
   </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
    <!--引入  axios.js-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    

<script>
    //模板语法来声明式地将数据渲染进 DOM 的系统
     
    //所有vue 页面都要先创建一个Vue对象;
    var app = new Vue({
        // key : value
        // el : 绑定页面dom元素，如果是id为app的元素这里就是 '#app'
        el: '#app',
        //data {}  json格式
        data: {
            // 变量名: 值
            message : 'hello Vue!',
            
            //有一个对象 保存了从后端返回的结果，同时这个数据可以和页面的模板语法中变量关联
            //可以实时响应 ,这里数组 [] 和后端返回的 []关联
            patients:[]

        },
        //自定义函数都可以写在 {}
        methods: {
            getPatient: function(){
                //调用后端接口，返回数据,要使用axios
                axios.get("http://localhost:9876/patient").then((res) => {
                    //请求成功后
                    //res后端返回的结果=>看看，和之前不同
                    console.log(res)
                    //特别注意: this的引用，如果=>函数，可以看到这里能正常引用到patient对象
                    // =>res.data中
                    this.patients = res.data.content;
                    
                }).catch((err) => {
                    console.log("axios error: "+ err)
                });
                
            }

        }

    });

   
   

</script>
</body>
</html>